<template>
  <div class="flex-x bbx-form-cell-change-box" v-if="showCom">
    <div v-for="(item, index) in cellGroup" :key="index" class="just-cur-point cell-item" :class="count === item.value ? 'choosed-item' : ''" @click="changeCell(item)">
      <el-tooltip class="item" effect="dark" :content="item.label" placement="bottom">
        <i class="iconfont" :class="item.icon"></i>
      </el-tooltip>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref, computed, nextTick } from 'vue';
import { useStateSystemFormBuilderCell, getAllGrayInfo, getRootWindow } from 'pub-bbx-utils'
import { formWithMultipleColumnsStashKey } from '@src/modules/system/frame/store'
import { t } from '@src/locales'
export default defineComponent({
  name: 'FormCellChange',
  props: {
    count: {
      type: Number,
    },
    disabled:{
      type: Boolean,
      default: false,
    }
  },
  setup(props, { emit }) {
    const haveFormCellGray = ref(false)
    const showCom = computed(()=>{
      return !props.disabled && haveFormCellGray.value
    })
    async function grayInfo (){
      let res = await getAllGrayInfo();
      if(res.FORM_MULTI_ROW){
        haveFormCellGray.value = true
        setTimeout(()=>{
          nextTick(()=>{
            const rootWindow = getRootWindow(window)
            rootWindow?.activeGuide(formWithMultipleColumnsStashKey)
          })
        }, 2000)
        
        
      }else{
        emit('update', 1);
      }
    }
    function createCellGroupItem(key, icon, label) {
      return {
        value: key,
        icon,
        label
      };
    }
    const cellGroup = [createCellGroupItem(1, 'icon-danlie', t('common.formCell.text1')), createCellGroupItem(2, 'icon-shuanglie', t('common.formCell.text2')), createCellGroupItem(3, 'icon-sanlie', t('common.formCell.text3')), createCellGroupItem(4, 'icon-silie', t('common.formCell.text4'))];
    function changeCell(item) {
      if(props.disabled || !haveFormCellGray.value) return;
      const { setSystemFormBuilderCell } = useStateSystemFormBuilderCell()
      setSystemFormBuilderCell(item.value)
      emit('update', item.value);
    }
    function watchRootChange() {
      window.addEventListener('message', event => {
        if(props.disabled || !haveFormCellGray.value) return;
        const { action, number } = event.data;
        if (action == 'changeAllFormBuilderCell') {
          emit('update', number);
        }
      });
    }
    async function initFormBuilderCellCount(){
      const { getSystemFormBuilderCell } = useStateSystemFormBuilderCell()
      let count = await getSystemFormBuilderCell()
      emit('update', count);
    }
    watchRootChange();
    grayInfo()
    initFormBuilderCellCount()
    return {
      cellGroup,
      changeCell,
      haveFormCellGray,
      showCom,
    };
  },
});
</script>
<style lang="scss" scoped>
.bbx-form-cell-change-box {
  .cell-item {
    color: #8c8c8c;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    &:not(:last-child) {
      margin-right: 4px;
    }
  }
  .choosed-item {
    color: #000;
    background-color: #e8e8e8;
  }
}
</style>
